<template>
  <div class="BBOIX" :style="{ height: evieHeight1}">
    <!-- <div class="input"> -->
      <div class="search">
        <icon class="first_icon" type="search" />
        <input v-model="searchVal" type="text" placeholder="请输入...">
      </div>
      <div class="search_2" @click="souSuo">搜索</div>
    <div class="anN">
      <div @click="quanX(NewItems)">全选</div>
      <div @click="quX(NewItems)">取消全选</div>
    </div>
    <div class="list" :style="{ height: evieHeight}">
      <div @click="xuanQ(item[2])" v-for="(item,index) in NewItems" :key="index">
        {{item[0]}}
        {{item[1]}}
        <span
          :class="item[3] == 1? 'isSelect' : 'noSelect' "
        >
          <img class="sss" src="../../static/img/login/gougou.png">
        </span>
      </div>
    </div>
    <div class="tJss">
      <div>已选择:{{zong.length}}</div>
      <div @click="button_1">确定</div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
      List: String,
      required: true
    },
  name: "HelloWorld",
  data() {
    return {
      evieHeight:'',
      evieHeight1:'',
      searchVal: "",
      items: [
        {
          machine: "Q001",
          number: "1",
          id:'1'
        },
      ],
	  zong: [],
	  showList:{},
    };
  },
  methods: {
    //点击全选
    quanX(e) {
      for (var i = 0; i < e.length; i++) {
        if (this.zong.indexOf(e[i][2]) < 0) {
          this.zong.push(e[i][2]);
        }
      }
      console.log(this.zong);
    },
    //点击取消
    quX(e) {
      for (var j = 0; j < e.length; j++) {
        let a = this.zong.indexOf(e[j][2]);
        if (a > -1) {
          this.zong.splice(a, 1);
        }
      }
      console.log(this.zong);
    },
    //点击选取
    xuanQ(e){
        if(this.zong.indexOf(e) < 0){
             this.zong.push(e);
        }else{
            let a = this.zong.indexOf(e);
            this.zong.splice(a, 1);
        }
        console.log(this.zong);
    },
    button_1(){
      this.$emit('dsplay',[0,this.zong]);
    },
  },
  //kexuan 可以选择
  computed: {
    
    NewItems() {
      var _this = this;
      var NewItems = [];
      for (let index in _this.items) {
        if (_this.items[index].machine.search(_this.searchVal) != -1||_this.items[index].number.search(_this.searchVal) != -1) {
          let a = this.zong.indexOf(_this.items[index].id);
          if(a > -1){
              NewItems.push([_this.items[index].machine,_this.items[index].number, _this.items[index].id,1]);
          }else{
              NewItems.push([_this.items[index].machine,_this.items[index].number, _this.items[index].id,2]);
          }
        }
      }
      return NewItems;
    },
  },
  mounted() {
    this.evieHeight = (wx.getSystemInfoSync().windowHeight-162) + "px";
    this.evieHeight1 = (wx.getSystemInfoSync().windowHeight) + "px";
    //this.items = this.List;
  },
  watch: {
      List(a,b) {
        this.items = a;
      }
    }
};
</script>
<style>
.BBOIX{
  position: relative;
}
.input {
  width: 670rpx;
  height: 50px;
  margin-left: 30rpx;
  background-color: rgb(163, 159, 159);
  overflow: hidden;
  padding-left: 20rpx;
}
input {
  height: 40px;
  margin-top: 5px;
}
.list {
  width: 720rpx;
  height: 700rpx;
  margin-left: 30rpx;
  overflow-y: scroll;
}
.list > div {
  width: 720rpx;
  height: 100rpx;
  font-size: 36rpx;
  line-height: 60rpx;
  position: relative;
  line-height: 100rpx;
  border-bottom: 2rpx solid #DADADA;
  box-sizing: border-box;
}
.anN {
  width:750rpx;
  height: 50px;
  line-height: 50px;
  text-align: center;
  border-bottom: 2rpx solid #DADADA;
  box-sizing: border-box;
  margin-top: 2rpx;
}
.anN > div:nth-of-type(1){
  margin-left: 30rpx;
  border-right: 2rpx solid #DADADA;
  box-sizing: border-box;
}
.anN > div {
  width: 345rpx;
  float: left;
}
.goug {
  position: absolute;
  width: 24rpx;
  height: 18rpx;
  top: 38rpx;
  right: 20rpx;
  display: none;
}
.sss {
  width: 24rpx;
  height: 18rpx;
  position: absolute;
  right: 20rpx;
  top: 38rpx;
}
.isSelect{
    opacity: 1;
}
.noSelect{
    opacity: 0;
}
.tJss{
  width: 690rpx;
  height: 80rpx;
  margin-left: 30rpx;
  position: absolute;
  bottom: 10px;
}
.tJss>div:nth-of-type(1){
  float: left;
  line-height: 80rpx;
  width: 400rpx;
}
.tJss>div:nth-of-type(2){
  float: left;
  width: 126rpx;
  height: 64rpx;
  background-color: #20C9E1;
  text-align: center;
  line-height: 64rpx;
  color: white;
  margin-left: 164rpx;
  margin-top: 7rpx;
  font-size: 30rpx;
}
/* .tJss{
  width: 560rpx;
  height: 80rpx;
  background-color: #20C9E1;
  text-align: center;
  line-height: 80rpx;
  border-radius: 8rpx;
  margin-left: 95rpx;
  position: absolute;
  bottom: 10px;
} */

/*搜索框*/
.search {
  width: 600rpx;
  float: left;
  height: 60rpx;
  border-radius: 60rpx;
  background-color: rgb(243, 239, 239);
  margin-left: 30rpx;
  margin-top: 14rpx;
}
.search input {
  height: 40rpx;
  margin-left: 70rpx;
  margin-top: 4rpx;
}
.first_icon {
  float: left;
  margin-left: 10rpx;
}
.search_2 {
  width: 90rpx;
  float: left;
  font-size: 28rpx;
  text-align: right;
  line-height: 88rpx;
}
</style>
